<template>
  <div id="knoSettingDiv">
    <Breadcrumb content="知识库维护" />
    <div class="bodyContent">
      <Splitpanes>
        <Pane size="15">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="toolbartitle">类别</div>
            </template>
          </vxe-toolbar>
          <vxe-table ref="folderTable" show-overflow border="outer" :row-config="{isHover: true, useKey: true,isCurrent:true}" :show-header="false" :data="tableData" :tree-config="{ transform: true, line: false, rowField: 'id', parentField: 'parentId', expandAll: true}" :expand-config="{ trigger: 'cell',expandAll: true}" @cell-click="folderRowClick">
            <vxe-column field="name" title="文件夹" tree-node :edit-render="{ autofocus: '.vxe-input--inner', autoselect: true }">
              <template #default="{ row }">
                <span class="text-df padding-tb-sm cursor text-blod" style="cursor: pointer">
                  <template v-if="row.children && row.children.length">
                    <i class="tree-node-icon el-icon-folder-opened padding-lr-xs text-orange" :class="validateIsOpen(row) ? 'vxe-icon-folder-open' : 'vxe-icon-folder'"></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon vxe-icon-folder padding-lr-xs text-orange"></i>
                  </template>
                  <span>{{ row.name }}</span>
                </span>
              </template>
              <template #edit="{ row }">
                <vxe-input v-model="row.name" type="text" @blur="editFolderRow(row)"></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </Pane>
        <Pane size="25">
          <vxe-toolbar>
            <template #buttons>
              <vxe-input v-model="formSearch.searchvalue" placeholder="关键字" />
              <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading" @click="findItemDictList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBoBox">
            <vxe-table ref="invOrderTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="left" height="auto" :data="itemDictList" :scroll-x="{ enabled:true }" :loading="tloading" @current-change="currentRowChange" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow>
              <vxe-column type="seq" width="40" align="left"></vxe-column>
              <vxe-column field="code" title="编号" width="80">
                <template #default="{ row }">
                  <span>{{ row.code }}</span>
                </template>
              </vxe-column>
              <vxe-column field="name" title="名称" min-width="80">
                <template #default="{ row }">
                  <span>
                    {{ row.name }}
                  </span>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="text-20 text-bold text-shadow">知识库内容</div>
            </template>
            <template #tools>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="saveItemDictKnoInfo"></vxe-button>
            </template>
          </vxe-toolbar>
          <el-scrollbar :height="'calc(100% - 45px)'">
            <vxe-table border="none" :edit-config="{trigger: 'click', mode: 'cell'}" :show-header="false" :data="formItems">
              <!-- <vxe-column type="seq" width="30" align="center"></vxe-column> -->
              <vxe-column field="value" title="Name" :edit-render="{autofocus: '.vxe-input--inner'}">
                <template #default="{row}">
                  <div class="text-16 text-bold text-shadow margin-tb-sm">{{row.fieldName}}</div>
                  <vxe-textarea v-model="row.value" :placeholder="row.fieldName" :autosize="{ minRows: 4}" resize="vertical"></vxe-textarea>
                </template>
                <template #edit="{ row }">
                  <div class="text-16 text-bold text-shadow margin-tb-sm">{{row.fieldName}}</div>
                  <vxe-textarea v-model="row.value" :placeholder="row.fieldName" :autosize="{ minRows: 4, maxRows: 6 }" resize="vertical"></vxe-textarea>
                </template>
              </vxe-column>
            </vxe-table>
            <!-- <vxe-form vertical ref="formRef" class="padding-lr" :data="formData">
              <vxe-form-item :title="m.fieldName" :field="m.fieldCode" span="24" v-for="(m,i) in formItems" :key="i">
                <template #default="{data}">
                  <vxe-textarea v-model="m.value" :placeholder="m.fieldName" :autosize="{ minRows: 4, maxRows: 6 }" resize="vertical"></vxe-textarea>
                </template>
              </vxe-form-item>
            </vxe-form> -->
          </el-scrollbar>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { formatDateTime } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import type { Length } from 'html2canvas/dist/types/css/types/length';

let { proxy }: any = getCurrentInstance();
let invOrderStatusList: any = reactive([]);
let transTypeList: any = reactive([]);
let itemDictList: any = reactive([]);
let invOrderReagentList: any = reactive([]);
let tloading = ref(false); //刷新加载状态
let iloading = ref(false); //刷新加载状态
let sltInvOrder: any = ref({});
let sltTransType: any = reactive({});
let reportList = reactive([]);
const isPreviewRpt = ref(false);
let printParamsObj = ref(null);
const invOrderTableRef = ref(null);/**项目表格对象 */
const folderTable = ref(null);/**树形表格对象 */

const tableData = ref([
  { id: 24555, parentId: null, name: '检验业务', type: 'avi', size: 224, date: '2020-10-01' },
  { id: 24566, parentId: 24555, name: '申请项目知识库', type: 'sqxm', size: 1024, date: '2021-06-01' },
  { id: 24577, parentId: 24555, name: '检验项目知识库', type: 'bgxm', size: 1024, date: '2021-06-01' }
]);

let formSearch = reactive({ searchvalue: '' });

let formData = {} as any;//**表单对象 */

let formItems = reactive([]);/**表单属性 */

// 页面加载时更新报告单元/字典
onMounted(async () => {
  //findItemDictList(); //批量获取字典
  folderTable.value?.setCurrentRow(tableData[1]);
  folderRowClick({ row: tableData.value[1] });
});

function validateIsOpen(row) {
  return (proxy.$refs.folderTable as any).isTreeExpandByRow(row);
}

// 点击质控品维护表格当前行触发右侧表单变化
function currentRowChange({ row }: any) {
  if (row.type === 'bgxm') {
    getItemDictKnoInfo(row);
  }
  if (row.type === 'sqxm') {
    getFeeItemKnoInfo(row);
  }
}

/**获取报告项目知识库信息 */
function getItemDictKnoInfo(row: any) {
  formItems.length = 0;
  const url = '/lis/lab/item/findItemDictKnoInfo';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { itemNo: row.code, itemNa: row.name, moduleId: '1716657789982969857', menuId: '1734778502300246018', tabKey: '001' }
    })
    .then((res: any) => {
      formItems.length = 0;
      formData = res.data;
      Object.assign(formItems, res.data.data);
    })
    .catch((err: any) => {
      tloading.value = false;
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
/**获取申请项目知识库信息 */
function getFeeItemKnoInfo(row: any) {
  formItems.length = 0;
  const url = '/api/sys/sysextenfieldsvalue/findExtenFieldsValueList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { moduleId: '1716657789982969857', menuId: '1734129954829893633', busRowId: row.id, tabKey: '001' }
    })
    .then((res: any) => {
      formItems.length = 0;
      formData = res.data;
      Object.assign(formItems, res.data.data);
    })
    .catch((err: any) => {
      tloading.value = false;
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
/**保存知识库内容 */
function saveItemDictKnoInfo() {
  const a = 'busRowId';
  formData[a] = formItems[0].busRowId;
  const url = '/api/sys/sysextenfieldsvalue/saveEditExtenFieldsValueList';
  proxy.$http
    //注意此处的数据条数
    .post(url, formData)
    .then((res: any) => {
      VxeMessage('保存成功', VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}

/**清空formData表单 */
function clearFormData() {
  for (const key in formData) {
    if (Object.prototype.hasOwnProperty.call(formData, key)) {
      object[key] = '';
    }
  }
}

// 获取最右侧 质控项目设定表格数据
function findItemDictList() {
  tloading.value = true;
  itemDictList.length = 0; //放入数据前清空数据
  const url = '/lis/lab/item/findAllItemDictList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { orgId: '1787488360349155329', enable: 1, searchValue: formSearch.searchvalue }
    })
    .then((res: any) => {
      let arr = [];
      res.data.forEach((m) => {
        arr.push({ id: m.id, name: m.itemNa, code: m.itemNo, type: 'bgxm' });
      });
      Object.assign(itemDictList, arr);
      currentRowChange({ row: arr[0] });
      invOrderTableRef.value?.setCurrentRow(arr[0]);
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
/**获取申请项目 */
function findFeeItems() {
  tloading.value = true;
  itemDictList.length = 0; //放入数据前清空数据
  const url = '/lis/fee/item/findFeeItemList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { orgId: '1787488360349155329', enable: 1, searchValue: formSearch.searchvalue }
    })
    .then((res: any) => {
      let arr = [];
      res.data.forEach((m) => {
        arr.push({ id: m.id, name: m.feeName, code: m.feeCode, type: 'sqxm' });
      });
      Object.assign(itemDictList, arr);
      currentRowChange({ row: arr[0] });
      invOrderTableRef.value?.setCurrentRow(arr[0]);
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
function folderRowClick({ row }: any) {
  if (row.type === 'sqxm') {
    findFeeItems();
  }
  if (row.type === 'bgxm') {
    findItemDictList();
  }

}

</script>

<style lang="scss" scoped>
#knoSettingDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);
    // 右侧保存按钮
    .saveBtn {
      //float: right;
      margin: 0px 30px;
    }
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 机构表格
    :deep(.vxe-table--render-default) {
      height: 100%;
    }
    :deep(.vxe-table--render-wrapper) {
      height: 100%;
      background-color: $base-white;
    }
    .tableBox {
      height: calc(100% - 40px);
    }
    .tableBoBox {
      height: calc(100% - 40px);
    }
    .horizontalLine {
      background-color: $base-white;
    }

    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }
    .form-input-m {
      .el-input {
        width: 150px;
      }

      .vxe-input {
        width: 150px !important;
      }
    }
  }
}
:deep(.vxe-textarea--inner) {
  border-radius: 4px;
}
</style>
